<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="wow/animate.css">
	<link rel="stylesheet" href="swiper/css/swiper.min.css">
	<style>
		/*.container{border:1px solid red;}
*/
		.swiper-slide img{
			width: 100%;
		}
	</style>
</head>
<body>
	<!-- 导航 -->
	<!-- navbar导航栏 navbar-inverse深色主题的导航 navbar-fixed-top固定在顶部-->
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container">
			<!-- navbar-header 防止链接往上串-->
			<div class="navbar-header">
			<!-- logo navbar-brand:导航栏的品牌-->
				<a href="" class="navbar-brand">Bootstrap中文网</a>
				<!-- 折叠按钮 navbar-toggle切换 data-toggle="collapse"折叠按钮 data-target数据目标-->
				<button class="navbar-toggle" data-toggle="collapse" data-target="#lj1">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
			<!-- 链接 collapse折叠 navbar-collapse大于768显示-->
			<div class="collapse navbar-collapse" id="lj1">
				<!-- ul>(li>a)*6 nav链接基础样式 navbar-nav导航栏链接-->
				<ul class="nav navbar-nav">
					<li><a href="">首页</a></li>
					<li><a href="">首页</a></li>
					<li><a href="">首页</a></li>
					<li><a href="">首页</a></li>
					<li><a href="">首页</a></li>
					<li><a href="">首页</a></li>
					<!-- <li><a href="">登录</a></li> -->
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="">登录</a></li>
					<li><a href="" data-toggle="modal" data-target="#zhuce">注册</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- 注册模态窗 -->
	<div class="modal fade" id="zhuce" >
		<div class="modal-dialog">
			<div class="modal-content">
				<!-- 头部 -->
				<div class="modal-header">
					<button class="close" data-dismiss="modal" >
						<span>&times;</span>
					</button>
					<h3 class="text-center">注册</h1>
				</div>
				<!-- 身体 -->
				<div class="modal-body">
					<form action="" id="myForm">
						<div class="form-group input-group">
							<!-- <label for="userName">用户名:</label> -->
							<span class="glyphicon glyphicon-user input-group-addon"></span>
							<input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名" required>
						</div>
						<div class="form-group input-group">
							<input type="password" class="form-control" id="passWord" name="passWord" placeholder="请输入密码" required>
							<label for="userName" class="input-group-addon">密码:</label>
						</div>
						<div class="form-group input-group">
							<label for="userName" class="input-group-addon">手机号:</label>
							<!-- oninvalid H5新增属性 setCustomValidity设置自定义验证-->
							<input type="tel" class="form-control" id="userPhone" name="userPhone" placeholder="请输入手机号" pattern="^1\d{10}$" oninvalid="this.setCustomValidity('请输入以1开头的11位数字')">
						</div>
						<div class="form-group">
							<label for="userName">验证码:</label>
							<input type="email" class="form-control" id="userName" placeholder="请输入验证码">
						</div>
						<!-- <button class="btn" type="submit" >注册</button> -->
					</form>
				</div>
				<!-- 脚部 -->
				<div class="modal-footer">
					<button class="btn btn-info" type="submit" form="myForm">注册</button>
					<button class="btn btn-danger" type="submit" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>			
	</div>
	<!-- 轮播 -->
	<div class="swiper-container s1 hidden-xs">
	<!-- wrapper触摸区域 -->
	  <div class="swiper-wrapper">
	  <!-- slide幻灯片 -->
	    <div class="swiper-slide">
			<img src="img/1.jpg" alt="">
	    </div>
	    <div class="swiper-slide">
			<img src="img/2.jpg" alt="">
	    </div>
	    <div class="swiper-slide">
			<img src="img/1.jpg" alt="">
	    </div>
	  </div>
	  <!-- 上下按钮 -->
	 	<div class="swiper-button-prev"></div>
    	<div class="swiper-button-next"></div>
    	<!-- 分页器 -->
    	<div class="swiper-pagination"></div>
	</div>
	<!-- 内容 -->
	<section class="container">
		<div class="page-header text-center">
			<h2>Bootstrap相关优质项目推荐</h2>
			<p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
		</div>
		<div class="row">
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 wow rollIn" data-wow-duration="10s">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 wow rollIn" data-wow-delay="2s">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 wow bounceInDown">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>
			<!-- 商品模块 -->
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<!-- thumbnail缩略图 -->
				<div class="thumbnail">
					<img src="img/expo.png" alt="图片">
					<div class="text-center">
						<h3 class="text-info">优秀劲炫<br><small>bootstrap网站实例</small></h3>
						<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站</p>
					</div>
					<div class="clearfix">
						<button class="btn btn-danger pull-right">详情</button>
					</div>
				</div>
			</div>

		</div>
	</section>
	<!-- 文章 -->
	<article class="container">
		<div class="row">
			<h2 class="text-center">今日大事</h2>
		</div>
		<ul class="nav nav-tabs">
			<li><a href="#t1" data-toggle="tab">学校要问</a></li>
			<li><a href="#t2" data-toggle="tab">学校新闻</a></li>
			<li><a href="#t3" data-toggle="tab">职业动态</a></li>
		</ul>
		<!-- tab-content 内容面板 -->
		<div class="tab-content">
			<!-- 第一个面板开始 -->
			<div class="tab-pane active" id="t1">
				<div class="row">
					<div class="col-md-8">
						<h3>天气晴朗<small>适合军训</small></h3>
						<p>的手机卡等级即可撒谎的健康撒谎的健康撒谎角度看活动即可撒谎的健康啥都好手机卡活动即可按时导航手机卡活动健康撒谎的健康撒谎登记卡上登记卡萨的时间按客户登记撒谎幅度恢复健康四大徽</p>
						<button class="btn btn-danger">详情</button>
					</div>
					<div class="col-md-4">
						<img src="img/jx1.jpg" alt="军训照片" class="img-responsive img-thumbnail">
					</div>
				</div>
			</div>
			<!-- 第一个面板结束 -->
			<!-- 第二个面板开始 -->
			<div class="tab-pane " id="t2">
				<div class="row">
					<div class="col-md-8">
						<h3>暴风雨<small>适合军训</small></h3>
						<p>的手机卡等级即可撒谎的健康撒谎的健康撒谎角度看活动即可撒谎的健康啥都好手机卡活动即可按时导航手机卡活动健康撒谎的健康撒谎登记卡上登记卡萨的时间按客户登记撒谎幅度恢复健康四大徽</p>
						<button class="btn btn-danger">详情</button>
					</div>
					<div class="col-md-4">
						<img src="img/jx1.jpg" alt="军训照片" class="img-responsive img-thumbnail">
					</div>
				</div>
			</div>
			<!-- 第二个面板结束 -->
			<!-- 第二个面板开始 -->
			<div class="tab-pane " id="t3">
				<div class="row">
					<div class="col-md-8">
						<h3>下冰雹<small>适合军训</small></h3>
						<p>的手机卡等级即可撒谎的健康撒谎的健康撒谎角度看活动即可撒谎的健康啥都好手机卡活动即可按时导航手机卡活动健康撒谎的健康撒谎登记卡上登记卡萨的时间按客户登记撒谎幅度恢复健康四大徽</p>
						<button class="btn btn-danger">详情</button>
					</div>
					<div class="col-md-4">
						<img src="img/jx1.jpg" alt="军训照片" class="img-responsive img-thumbnail">
					</div>
				</div>
			</div>
			<!-- 第二个面板结束 -->
		</div>
	</article>
	

	<script src="js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.js"></script>
	<script src="wow/wow.min.js"></script>
	<script src="swiper/js/swiper.min.js"></script>
	<script>
		new WOW().init();
		var swiper=new Swiper('.s1', {
			autoplay: 4000,//可选选项，自动滑动
			prevButton:'.swiper-button-prev',
			nextButton:'.swiper-button-next',
			loop:true,
			pagination :".swiper-pagination",
			paginationClickable :true,
		})

	</script>
</body>
</html>